import React, { useEffect, useState } from 'react';
import './Index.scss'
import { Layout, Menu, Avatar, Dropdown, Breadcrumb } from 'antd';
import { Outlet, useNavigate, useLocation } from 'react-router-dom'
import { DropboxOutlined, MenuFoldOutlined, MenuUnfoldOutlined, UserOutlined, DownOutlined } from '@ant-design/icons';
import type { MenuProps } from 'antd';
import Obj from '../../utiles/data/data'
interface Props {

}
function Index(props: Props) {
  const Navigate = useNavigate()
  const Location = useLocation()

  const { Header, Footer, Sider, Content } = Layout;
  type MenuItem = Required<MenuProps>['items'][number];
  const [collapsed, setCollapsed] = useState(false);
  let [data, setdata] = useState([])
  //储存用户信息
  console.log();
  const headerStyle: React.CSSProperties = {
    color: '#666666',
    backgroundColor: '#fff',
  };

  const contentStyle: React.CSSProperties = {
    backgroundColor: '#f7f7f7',
  };

  const siderStyle: React.CSSProperties = {
    lineHeight: '120px',
    backgroundColor: '#fff',
  };
  // 获取到用户信息
  let locals = () => {
    return ((JSON.parse((localStorage.getItem('userinfo') || '[]'))).username)
  }


  //右上角，下拉按钮选择
  const UserItem: MenuProps['items'] = [
    {
      key: '1',
      label: (
        <div onClick={() => { topersonals() }}>
          个人中心
        </div>
      ),
    },
    {
      key: '2',
      label: (
        <div onClick={() => { tologin() }}>
          退出登录
        </div>
      ),
    },
  ]
  //右上角个人中心按钮
  let topersonals = () => {
    Navigate('/index/personals')
  }
  //右上角退出登录按钮
  let tologin = () => {
    Navigate('/login')
  }
  const items: MenuProps['items'] = [

    getItem('首页', '/index/home', <DropboxOutlined />),

    getItem('组织机构', 'sub1', <DropboxOutlined />, [
      getItem('组织管理', '/index/OrganizationManagement',),
      getItem('岗位管理', '/index/JobManagement',),
      getItem('职务管理', '/index/OfficeManagement',)
    ]),

    getItem('人事管理', 'sub2', <DropboxOutlined />, [
      getItem('人员管理', '/index/personnel'),
      getItem('转正管理', '/index/permoted'),
      getItem('离职管理', '/index/leave')
    ]),
    getItem('社保公积金', 'sub3', <DropboxOutlined />, [
      getItem('社保方案', '/index/SocialSecurity'),
      getItem('公积金方案', '/index/AccumulationFund'),
      getItem('参保档案', '/index/Enrollmentfile'),

    ]),

    getItem('员工薪资', 'sub4', <DropboxOutlined />, [
      getItem('薪资档案', '/index/salaryFile'),
      getItem('薪资调整', '/index/adjust'),
      getItem('定薪模板', '/index/salaryFormWork'),
    ]),

    getItem('薪资核算', 'sub5', <DropboxOutlined />, [
      getItem('薪资项目', '/index/Salaryproject'),
      getItem('薪资方案', '/index/Salaryscheme'),
      getItem('薪资台账', '/index/Payrollledger'),
    ]),

    getItem('个税数据', 'sub6', <DropboxOutlined />, [
      getItem('专项附加扣除', '/index/deduct'),
      getItem('累计应纳税所得额', '/index/duty'),
      getItem('计税规则', '/index/Taxsystem'),
    ]),

    getItem('考勤数据', 'sub7', <DropboxOutlined />, [
      getItem('考勤报表', '/index/attendanc'),
      getItem('假期计薪规则', '/index/Holiday'),
      getItem('全勤奖规则', '/index/Fullattendance'),
    ]),

    getItem('工资单管理', 'sub8', <DropboxOutlined />, [
      getItem('工资单设置', '/index/settings'),
      getItem('工资发放', '/index/payroll'),
    ]),

    getItem('系统设置', 'sub9', <DropboxOutlined />, [
      getItem('用户管理', '/index/user'),
      getItem('角色管理', '/index/role'),
      getItem('个人中心', '/index/personals'),
    ]),
  ];

  function getItem(
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[],
    type?: 'group',
  ): MenuItem {
    return {
      key,
      icon,
      children,
      label,
      type,
    } as MenuItem;
  }

  //左侧菜单栏跳转
  let onClick = ({ item, key, keyPath }: any) => {
    setdata(keyPath)
    Navigate(key)
  }

  return (
    <div className='index'>
      <Layout >
        <Sider style={siderStyle} width='256px' collapsed={collapsed}>
          <div className='logo' style={{ display: (collapsed ? 'none' : 'block') }}>
            <img src="https://img.tukuppt.com/ad_preview/00/58/12/oXIaFjoOnu.jpg!/fw/260" alt="" />
            <span className='title'>薪资管理系统</span>
          </div>
          <Menu
            onClick={onClick}
            mode="inline"
            items={items}
          />
        </Sider>
        <Layout >
          <Header style={headerStyle}>
            <div className='header'>
              <div className='box'>
                <div className="left" onClick={() => { setCollapsed(!collapsed) }} style={{ display: (collapsed ? 'none' : 'block') }}>
                  <MenuFoldOutlined />
                </div>
                <div className="left" onClick={() => { setCollapsed(!collapsed) }} style={{ display: (collapsed ? 'block' : 'none') }}>
                  <MenuUnfoldOutlined />
                </div>
                <div className='mianbao'>
                  <Breadcrumb style={{ margin: '16px 0' }}>
                    {
                      Location.pathname == '/index/home' ? <Breadcrumb.Item></Breadcrumb.Item> : <Breadcrumb.Item>首页</Breadcrumb.Item>
                    }
                    {
                      data.reverse().map((item, index) => {
                        return (
                          <Breadcrumb.Item key={index}>{Obj[item]}</Breadcrumb.Item>
                        )
                      })
                    }
                  </Breadcrumb>
                </div>
              </div>
              <div className="right">
                <Dropdown menu={{ items: UserItem }}>
                  <a onClick={(e) => e.preventDefault()}>
                    <Avatar size={32} icon={<UserOutlined />} />
                    <span style={{ margin: '0 5px' }}>{locals()}</span>
                    <DownOutlined />
                  </a>
                </Dropdown>
              </div>
            </div>
          </Header>

          <Content style={contentStyle}>
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </div>
  );
}

export default Index;